<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>四——canvas实现</title>
</head>

<body>
  <canvas id="myCanvas" width="700" height="500">
    你的浏览器不支持canvas
  </canvas>
  <script>
    var cans = document.getElementById("myCanvas");
    var ctx = cans.getContext("2d");

    reDraw(50, 50);
    //设置初始坐标
    let x = 50, y = 50, key = getKey();

    document.addEventListener("keydown", function () {
      // ctx.clearRect(0, 0, cans.width, cans.height);
      cans.height = cans.height;

      //根据键盘的keyCode值，设定重新绘图的坐标并绘制新的图片
      switch (key.direction) {
        case "up":
          y -= 2;
          reDraw(x, y);
          break;
        case "down":
          y += 2;
          reDraw(x, y);
          break;
        case "left":
          x -= 2;
          reDraw(x, y);
          break;
        case "right":
          x += 2;
          reDraw(x, y);
          break;
        default:
          reDraw(x, y);
      }
    }, false);


    //函数画出新的方块
    function reDraw(x, y) {
      ctx.rect(x, y, 50, 50)
      ctx.fillStyle = "#b6b7bc";
      ctx.fill()
    }
    //将wasd和上下左右结合起来
    function getKey() {
      let key = {};

      window.addEventListener("keydown", function (e) {

        let keys = e.keyCode;

        if (keys == 38 || keys == 87) {
          key.direction = "up";
        } else if (keys == 39 || keys == 68) {
          key.direction = "right";
        } else if (keys == 40 || keys == 83) {
          key.direction = "down";
        } else if (keys == 37 || keys == 65) {
          key.direction = "left";
        } else {
          key.direction = "";
        }
      }, false);



      return key;

    }


  </script>

</body>

</html>